const zit1 = document.querySelector('.zit1');
const zit2 = document.querySelector('.zit2');
const zhsz1 = document.querySelector('.zh-sz1 ');
const zhsz2 = document.querySelector('.zh-sz2');
const zhszb1 = document.querySelector('.zh-sz1 b');
const zhszb2 = document.querySelector('.zh-sz2 b');
const zuls1 = document.querySelector('.z-uls1');
const zuls2 = document.querySelector('.z-uls2');
const i2 = document.querySelector('.i2');
const i1 = document.querySelector('.i1');
const lisa = document.querySelectorAll('.z-uls1 li');
const lisb = document.querySelectorAll('.z-uls2 li');


const gh = document.querySelector('.g-h');
const fo =document.querySelector('.f-l-o');
const tab = document.querySelector('.tab');
const tabot = document.querySelector('.tabot');
const tabots = document.querySelector('.tabot-s');
const tabulp = document.querySelector('.tabulp');
const tablif = document.querySelector('.tabli-f');
const tablis = document.querySelector('.tabli-s');
const titf = document.querySelector('.titf');
const tits = document.querySelector('.tits');
const lis1 = document.querySelector('.lis1');

const li1 = lis1.children;
const lis2 = document.querySelector('.lis2');
const li2 = lis2.children;
const lis3 = document.querySelector('.lis3');
const li3 = lis3.children;
const lis4 = document.querySelector('.lis4');
const li4 = lis4.children;
const lis5 = document.querySelector('.lis5');
const li5 = lis5.children;
const lis6 = document.querySelector('.lis6');
const li6 = lis6.children;
const lis7 = document.querySelector('.lis7');
const li7 = lis7.children;
const slis1 = document.querySelector('.slis1');
const sli1 = slis1.children;
const slis2 = document.querySelector('.slis2');
const sli2 = slis2.children;
const slis3 = document.querySelector('.slis3');
const sli3 = slis3.children;
const slis4 = document.querySelector('.slis4');
const sli4 = slis4.children;
const slis5 = document.querySelector('.slis5');
const sli5 = slis5.children;
const slis6 = document.querySelector('.slis6');
const sli6 = slis6.children;
const slis7 = document.querySelector('.slis7');
const sli7 = slis7.children;
const w = document.querySelector('.w');
const y = document.querySelector('.y');
const ffs = document.querySelector('.ffs');
const f2show = document.querySelector('.f2-show');
const fff = document.querySelector('.fff');
const f1show = document.querySelector('.f1-show');



zit1.onmouseenter = function(){
    zuls1.style.display = 'block';
        this.style.color  = '#fff';
        this.style.background = 'rgb(32, 82, 158)';
        i1.style.color = '#fff';
}
zit1.onmouseleave = function(){
    zuls1.style.display = 'none';
    this.style.color  = '#000';
    this.style.background = '#fff';
    i1.style.color = '#666';}
zit2.onmouseenter = function(){
        zuls2.style.display = 'block';
        this.style.color  = '#fff';
        this.style.background = 'rgb(32, 82, 158)';
        i2.style.color = '#fff';
    }
zit2.onmouseleave = function(){
        zuls2.style.display = 'none';
        this.style.color  = '#000';
        this.style.background = '#fff';
        i1.style.color = '#666';}    
for(let i = 0 ;i<lisa.length;i++){
    lisa[i].onclick = function(){
        console.log(1)
        zhszb1.innerHTML = lisa[i].innerHTML;
        zuls1.style.display = 'none';
        zit1.style.color  = '#000';
        zit1.style.background = '#fff';
        i1.style.color = '#666';
    }
}
for(let j = 0 ;j<lisb.length;j++){
    lisb[j].onclick = function(){
        zhszb2.innerHTML = lisb[j].innerHTML;
        zuls2.style.display = 'none';
        zit2.style.color  = '#000';
        zit2.style.background = '#fff';
        i2.style.color = '#666';
    }
}



fo.addEventListener('mouseenter',function(){
    tab.style.display = 'block';
    tabot.style.displsy = 'block';
    tablis.className = 'tabli-s tab-g2';
    for(let i = 0;i < li1.length;i++){
        li1[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li1[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li1[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li2.length;i++){
        li2[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li2[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li2[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li3.length;i++){
        li3[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li3[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li3[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li4.length;i++){
        li4[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li4[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li4[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li5.length;i++){
        li5[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li5[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li5[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li6.length;i++){
        li6[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li6[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li6[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    for(let i = 0;i < li7.length;i++){
        li7[i].onmouseenter = function(){
            this.style.background = 'rgb(32, 82, 158)';
            this.style.color = '#fff';
        }
        li7[i].onclick = function(){
            w.innerHTML = this.innerHTML;;
            tab.style.display = 'none';
        }
        li7[i].onmouseleave = function(){
            this.style.background = '#fff';
            this.style.color = '#000';
        }
    }
    tablis.addEventListener('mouseenter',function(){
        this.className = 'tabli-s tab-g1';
        tablif.className = 'tabli-f tab-g2';
        tablif.style.border = '1px solid #d6d6d6';
        tablif.style.borderBottom = '1px solid rgb(32, 82, 158)';
        tabot.style.display = 'none';
        tabots.style.display = 'block';
        tits.style.color = '1px solid rgb(32, 82, 158)';
        for(let i = 0;i < sli1.length;i++){
            sli1[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli1[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli1[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli2.length;i++){
            sli2[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli2[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli2[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli3.length;i++){
            sli3[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli3[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli3[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli4.length;i++){
            sli4[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli4[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli4[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli5.length;i++){
            sli5[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli5[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli5[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli6.length;i++){
            sli6[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli6[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli6[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < sli7.length;i++){
            sli7[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            sli7[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            sli7[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
    });
    tablif.addEventListener('mouseenter',function(){
        this.className = 'tabli-f tab-g1';
        tabot.style.display = 'block';
        tabots.style.display = 'none';
        tablis.className = 'tabli-s tab-g2';
        this.style.borderTop  = '1px solid rgb(32, 82, 158)';
        this.style.borderLeft = '1px solid rgb(32, 82, 158)';
        this.style.borderRight  = '1px solid rgb(32, 82, 158)';
        this.style.borderBottom = '1px solid #fff';
        this.style.color = '1px solid rgb(32, 82, 158)';
        // this.className = 'tabli-f tab-g1';
        for(let i = 0;i < li1.length;i++){
            li1[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li1[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li1[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li2.length;i++){
            li2[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li2[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li2[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li3.length;i++){
            li3[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li3[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li3[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li4.length;i++){
            li4[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li4[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li4[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li5.length;i++){
            li5[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li5[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li5[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li6.length;i++){
            li6[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li6[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li6[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
        for(let i = 0;i < li7.length;i++){
            li7[i].onmouseenter = function(){
                this.style.background = 'rgb(32, 82, 158)';
                this.style.color = '#fff';
            }
            li7[i].onclick = function(){
                w.innerHTML = this.innerHTML;;
                tab.style.display = 'none';
            }
            li7[i].onmouseleave = function(){
                this.style.background = '#fff';
                this.style.color = '#000';
            }
        }
    })

});
fo.addEventListener('mouseleave',function(){
    tab.style.display = 'none';
});
tab.addEventListener('mouseenter',function(){
    tab.style.display = 'block';
});
tab.addEventListener('mouseleave',function(){
    tab.style.display = 'none';
});
tabulp.addEventListener('click',function(){
    tab.style.display = 'none';
})
fff.onmouseenter = function(){
    f1show.style.display = 'block';
}
ffs.onmouseenter = function(){
    f2show.style.display = 'block';
}
fff.onmouseleave = function(){
    f1show.style.display = 'none';
}
ffs.onmouseleave = function(){
    f2show.style.display = 'none';
}